<template>
  <div class="dashboard-container">
    <el-row v-for="(item, i) in icon" :key="i">
      <el-col v-for="(items, index) in icon[0]" :span="4" :key="items" class="icon">
        <i :class="item[index]" />
        <p>{{ item[index] }}</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Icon',
  data() {
    return {
      icon: [
        [
          'el-icon-platform-eleme',
          'el-icon-eleme',
          'el-icon-delete-solid',
          'el-icon-delete',
          'el-icon-s-tools',
          'el-icon-setting'
        ],
        [
          'el-icon-user-solid',
          'el-icon-user',
          'el-icon-phone',
          'el-icon-phone-outline',
          'el-icon-more',
          'el-icon-more-outline'
        ],
        [
          'el-icon-star-on',
          'el-icon-star-off',
          'el-icon-s-goods',
          'el-icon-goods',
          'el-icon-warning',
          'el-icon-warning-outline'
        ],
        [
          'el-icon-question',
          'el-icon-info',
          'el-icon-circle-plus',
          'el-icon-success',
          'el-icon-error',
          'el-icon-zoom-in'
        ],
        [
          'el-icon-zoom-out',
          'el-icon-remove-outline',
          'el-icon-circle-plus-outline',
          'el-icon-circle-check',
          'el-icon-circle-close',
          'el-icon-s-help'
        ],
        [
          'el-icon-help',
          'el-icon-minus',
          'el-icon-plus',
          'el-icon-check',
          'el-icon-close',
          'el-icon-picture'
        ],
        [
          'el-icon-picture-outline',
          'el-icon-lollipop',
          'el-icon-upload',
          'el-icon-upload2',
          'el-icon-download',
          'el-icon-camera-solid'
        ],
        [
          'el-icon-camera',
          'el-icon-water-cup',
          'el-icon-video-camera',
          'el-icon-message-solid',
          'el-icon-bell',
          'el-icon-s-cooperation'
        ],
        [
          'el-icon-s-order',
          'el-icon-s-platform',
          'el-icon-s-fold',
          'el-icon-s-unfold',
          'el-icon-s-operation',
          'el-icon-s-promotion'
        ],
        [
          'el-icon-s-home',
          'el-icon-s-release',
          'el-icon-s-ticket',
          'el-icon-s-management',
          'el-icon-s-open',
          'el-icon-s-shop'
        ],
        [
          'el-icon-s-marketing',
          'el-icon-s-flag',
          'el-icon-s-comment',
          'el-icon-s-finance',
          'el-icon-s-claim',
          'el-icon-s-custom'
        ],
        [
          'el-icon-s-opportunity',
          'el-icon-s-data',
          'el-icon-s-check',
          'el-icon-s-grid',
          'el-icon-menu',
          'el-icon-share'
        ],
        [
          'el-icon-d-caret',
          'el-icon-caret-left',
          'el-icon-caret-right',
          'el-icon-caret-bottom',
          'el-icon-caret-top',
          'el-icon-bottom-left'
        ],
        [
          'el-icon-bottom-right',
          'el-icon-back',
          'el-icon-right',
          'el-icon-bottom',
          'el-icon-top',
          'el-icon-top-left'
        ],
        [
          'el-icon-top-right',
          'el-icon-arrow-left',
          'el-icon-arrow-right',
          'el-icon-arrow-down',
          'el-icon-arrow-up',
          'el-icon-d-arrow-left'
        ],
        [
          'el-icon-d-arrow-right',
          'el-icon-video-pause',
          'el-icon-video-play',
          'el-icon-refresh',
          'el-icon-refresh-right',
          'el-icon-refresh-left'
        ],
        [
          'el-icon-finished',
          'el-icon-sort',
          'el-icon-sort-up',
          'el-icon-sort-down',
          'el-icon-rank',
          'el-icon-loading'
        ],
        [
          'el-icon-view',
          'el-icon-c-scale-to-original',
          'el-icon-date',
          'el-icon-edit',
          'el-icon-edit-outline',
          'el-icon-folder'
        ],
        [
          'el-icon-folder-opened',
          'el-icon-folder-add',
          'el-icon-folder-remove',
          'el-icon-folder-delete',
          'el-icon-folder-checked',
          'el-icon-tickets'
        ],
        [
          'el-icon-document-remove',
          'el-icon-document-delete',
          'el-icon-document-copy',
          'el-icon-food',
          'el-icon-document',
          'el-icon-document-add'
        ],
        [
          'el-icon-printer',
          'el-icon-paperclip',
          'el-icon-takeaway-box',
          'el-icon-search',
          'el-icon-monitor',
          'el-icon-attract'
        ],
        [
          'el-icon-mobile',
          'el-icon-scissors',
          'el-icon-umbrella',
          'el-icon-headset',
          'el-icon-brush',
          'el-icon-mouse'
        ],
        [
          'el-icon-coordinate',
          'el-icon-magic-stick',
          'el-icon-data-line',
          'el-icon-data-board',
          'el-icon-pie-chart',
          'el-icon-data-analysis'
        ],
        [
          'el-icon-collection-tag',
          'el-icon-film',
          'el-icon-suitcase',
          'el-icon-suitcase-1',
          'el-icon-receiving',
          'el-icon-collection'
        ],
        [
          'el-icon-files',
          'el-icon-notebook-1',
          'el-icon-notebook-2',
          'el-icon-toilet-paper',
          'el-icon-office-building',
          'el-icon-school'
        ],
        [
          'el-icon-table-lamp',
          'el-icon-house',
          'el-icon-no-smoking',
          'el-icon-smoking',
          'el-icon-shopping-cart-full',
          'el-icon-shopping-cart-1'
        ],
        [
          'el-icon-shopping-cart-2',
          'el-icon-shopping-bag-1',
          'el-icon-shopping-bag-2',
          'el-icon-sold-out',
          'el-icon-sell',
          'el-icon-box'
        ],
        [
          'el-icon-bank-card',
          'el-icon-money',
          'el-icon-coin',
          'el-icon-wallet',
          'el-icon-discount',
          'el-icon-price-tag'
        ],
        [
          'el-icon-news',
          'el-icon-guide',
          'el-icon-male',
          'el-icon-female',
          'el-icon-thumb',
          'el-icon-cpu'
        ],
        [
          'el-icon-link',
          'el-icon-connection',
          'el-icon-open',
          'el-icon-turn-off',
          'el-icon-set-up',
          'el-icon-chat-round'
        ],
        [
          'el-icon-chat-line-round',
          'el-icon-chat-square',
          'el-icon-chat-dot-round',
          'el-icon-chat-dot-square',
          'el-icon-chat-line-square',
          'el-icon-message'
        ],
        [
          'el-icon-position',
          'el-icon-coffee',
          'el-icon-grape',
          'el-icon-cold-drink',
          'el-icon-coffee-cup',
          'el-icon-hot-water'
        ]
      ] // 数据
    }
  },
  methods: {
    // 方法
  }
}
</script>

<style scoped>
.dashboard-container {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.icon {
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 121px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  padding-top: 20px;
  word-wrap: break-word;
  word-break: normal;
}
.icon:hover {
  color: #409eff;
}
</style>
